<template>
	<view>
		<view class="cpt-mask"></view>
		<view class="content">
			<image  :src="$util.img('upload/uniapp/contribution/detail_close@2x.png')" class="closeimg" @click="close"></image>
			<view class="head">
				<image class="img" :src="goods.goods_img"></image>
				<view class="head_r">
					<view class="good_name">{{goods.goods_name}}</view>
					<view class="money">{{goods.exchange_value}}</view>
					<progress v-if="goods" class="pro" :percent="percent" border-radius=4 stroke-width="8" activeColor="#FF4544" backgroundColor="#FFCE89"></progress>
					<view class="difference">还差{{goods.exchange_value-goods.have_value}}数字资产</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="address" @click="select_address">
				<view class="address_left">
					<view class="use_name_phont">
						<view class="use_name">{{address.name}}</view>
						<view class="use_phont">{{address.mobile}}</view>
					</view>
					<view class="use_address">{{address?address.full_address + address.address:'请选择收货地址'}}</view>
				</view>
				<image :src="$util.img('upload/uniapp/contribution/detail_right.png')"></image>
			</view>
			<view class="line"></view>
			<view class="view1">
				<view class="input">
					<view class="v1" @click="down">-</view>
					<view class="v2">{{initial_value}}</view>
					<view class="v3" @click="add">+</view>
				</view>
				<view class="view2">必须以{{goods.min_value}}的倍数参与</view>
			</view>
			<view class="button" @click="go_duobao(initial_value)">立即夺宝</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"diy_indiana",
		data() {
			return {
				initial_value:100,//初始的数字资产
			};
		},
		props:['goods','address'],
		computed: {
			percent() {
				return parseFloat(this.goods.have_value/this.goods.exchange_value*100).toFixed(2);
			}
		},
		methods:{
			close(){//关闭弹窗
				this.$emit('closePop')
			},
			add(){//加
				this.initial_value = parseInt(this.initial_value) + parseInt(this.goods.min_value)
			},
			down(){//减
				if(parseInt(this.initial_value) == parseInt(this.goods.min_value)){
					this.initial_value = parseInt(this.goods.min_value);
					return
				}
				this.initial_value = parseInt(this.initial_value) - parseInt(this.goods.min_value)
			},
			go_duobao(num){//立即夺宝
				this.$emit('myEven',num)
			},
			select_address(){
				var params = {
					back:'promotionpages/contribution/details',
					local: 0,
					type: 1
				}
				this.$util.redirectTo('/otherpages/member/address/address', params);
			}
		},
		created() {
			this.initial_value = parseInt(this.goods.min_value);
		}
	}
</script>

<style lang="scss">
	.cpt-mask {  
        position: fixed;  
        top: 0;  
        left: 0;  
        width: 750rpx;  
        height: 100%;  
        background-color: #000000;  
        opacity: 0.7;  
        z-index: 99; 
    }  
	.content{
		position:fixed;
		bottom: 0;
		width: 750rpx;
		height: 761rpx;
		background-color: #FFFFFF; 
		border-radius: 16rpx 16rpx 0 0;
		z-index: 100;
		.closeimg{
			margin-left: 672rpx;
			margin-top: 30rpx;
			width: 48rpx;
			height: 48rpx;
		}
		.head{
			padding: 0 78rpx 0 36rpx;
			display: flex;
			.img{
				max-width: 228rpx;
				height: 228rpx;
			}
			.head_r{
				margin-left: 20rpx;
				.good_name{
					margin-top: 15rpx;
					height: 46rpx;
					line-height: 46rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #303133;
					overflow: hidden;
					word-break: break-all;  /* break-all(允许在单词内换行。) */
					text-overflow: ellipsis;  /* 超出部分省略号 */
					display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
					-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
					-webkit-line-clamp: 1; /** 显示的行数 **/
				}
				.money{
					margin-top: 32rpx;
					height: 28rpx;
					line-height: 28rpx;
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF4544;
				}
				.pro{
					margin-top: 34rpx;
					width: 200rpx;
				}
				.difference{
					margin-top: 8rpx;
					height: 28rpx;
					line-height: 28rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #909399;
				}
			}
		}
		.line{
			width: 750rpx;
			height: 1rpx;
			background: #EBEBEB;
			margin-top: 30rpx;
		}
		.address{
			padding: 25rpx 24rpx 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.address_left{
				.use_name_phont{
					display: flex;
					.use_name{
						height: 40rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #303133;
					}
					.use_phont{
						margin-left: 16rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #303133;
					}
				}
				.use_address{
					margin-top: 12rpx;
					height: 80rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #909399;
				}
			}
			image{
				margin-left: 42rpx;
				width: 34rpx;
				height: 34rpx;
			}
		}
		.view1{
			padding: 40rpx 100rpx 0 30rpx;
			display: flex;
			align-items: flex-end;
			.input{
				display: flex;
				.v1{
					width: 64rpx;
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 100rpx 0 0 100rpx;
					border: 1rpx solid #D8D8D8;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 40rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 64rpx;
				}
				.v2{
					margin-left: -1rpx;
					width: 160rpx;
					height: 64rpx;
					background: #F7F7F7;
					border: 1rpx solid #D8D8D8;
					display: flex;
					justify-content: center;
					align-items: center;
					line-height: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #303133;
				}
				.v3{
					margin-left: -1rpx;
					width: 64rpx;
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 0 100rpx 100rpx 0;
					border: 1rpx solid #D8D8D8;
					display: flex;
					justify-content: center;
					align-items: center;
					line-height: 64rpx;
					font-size: 40rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
				}
			}
			.view2{
				margin-left: 20rpx;
				height: 34rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #909399;
			}
		}
		.button{
			height: 88rpx;
			width: 100%;
			position: fixed;
			bottom: 0rpx;
			background: #FF4544;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 88rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>
